<template>
  <div class="pos-page">
    <div class="pos-container">
      <!-- 左侧：商品扫描和列表 -->
      <div class="left-panel">
        <div class="scan-section">
          <div class="scan-input">
            <input 
              v-model="scanCode" 
              @keyup.enter="addProduct"
              placeholder="扫描商品条码或输入商品编码"
              class="scan-field"
            />
            <button @click="addProduct" class="scan-btn">添加</button>
          </div>
        </div>

        <div class="cart-section">
          <div class="cart-header">
            <h3>购物车</h3>
            <button @click="clearCart" class="clear-btn">清空</button>
          </div>
          <div class="cart-items">
            <div 
              v-for="(item, index) in cartItems" 
              :key="index"
              class="cart-item"
            >
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-price">¥{{ item.price.toFixed(2) }}</div>
              </div>
              <div class="item-controls">
                <button @click="decreaseQuantity(index)" class="qty-btn">-</button>
                <span class="qty-display">{{ item.quantity }}</span>
                <button @click="increaseQuantity(index)" class="qty-btn">+</button>
                <button @click="removeItem(index)" class="remove-btn">删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：结算区域 -->
      <div class="right-panel">
        <div class="total-section">
          <div class="total-row">
            <span>商品总数：</span>
            <span>{{ totalItems }} 件</span>
          </div>
          <div class="total-row">
            <span>商品总额：</span>
            <span>¥{{ subtotal.toFixed(2) }}</span>
          </div>
          <div class="total-row discount-row">
            <span>会员折扣：</span>
            <span>-¥{{ discount.toFixed(2) }}</span>
          </div>
          <div class="total-row grand-total">
            <span>应付总额：</span>
            <span>¥{{ grandTotal.toFixed(2) }}</span>
          </div>
        </div>

        <div class="payment-section">
          <div class="payment-methods">
            <button @click="processPayment('cash')" class="payment-btn cash">
              现金支付
            </button>
            <button @click="processPayment('wechat')" class="payment-btn wechat">
              微信支付
            </button>
            <button @click="processPayment('alipay')" class="payment-btn alipay">
              支付宝
            </button>
            <button @click="processPayment('card')" class="payment-btn card">
              银行卡
            </button>
          </div>
        </div>

        <div class="member-section">
          <div class="member-input">
            <input 
              v-model="memberCode" 
              @keyup.enter="searchMember"
              placeholder="输入会员卡号或手机号"
              class="member-field"
            />
            <button @click="searchMember" class="member-btn">查询</button>
          </div>
          <div v-if="currentMember" class="member-info">
            <div class="member-name">{{ currentMember.name }}</div>
            <div class="member-points">积分：{{ currentMember.points }}</div>
            <div class="member-level">等级：{{ currentMember.level }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付确认弹窗 -->
    <div v-if="showPaymentModal" class="payment-modal">
      <div class="modal-content">
        <h3>确认支付</h3>
        <div class="payment-amount">¥{{ grandTotal.toFixed(2) }}</div>
        <div class="payment-method">{{ paymentMethodText }}</div>
        <div class="modal-buttons">
          <button @click="confirmPayment" class="confirm-btn">确认支付</button>
          <button @click="cancelPayment" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const scanCode = ref('')
const cartItems = ref([])
const memberCode = ref('')
const currentMember = ref(null)
const showPaymentModal = ref(false)
const selectedPaymentMethod = ref('')

// 模拟商品数据
const products = ref([
  { code: '001', name: '可口可乐 330ml', price: 3.50, stock: 100 },
  { code: '002', name: '百事可乐 330ml', price: 3.50, stock: 80 },
  { code: '003', name: '雪碧 330ml', price: 3.00, stock: 90 },
  { code: '004', name: '芬达 330ml', price: 3.00, stock: 70 },
  { code: '005', name: '红牛 250ml', price: 6.50, stock: 50 },
  { code: '006', name: '脉动 600ml', price: 4.50, stock: 60 },
  { code: '007', name: '农夫山泉 550ml', price: 2.00, stock: 200 },
  { code: '008', name: '康师傅绿茶 500ml', price: 3.50, stock: 85 }
])

// 计算属性
const totalItems = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0)
})

const subtotal = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
})

const discount = computed(() => {
  if (!currentMember.value) return 0
  const discountRate = currentMember.value.level === 'VIP' ? 0.1 : 0.05
  return subtotal.value * discountRate
})

const grandTotal = computed(() => {
  return subtotal.value - discount.value
})

const paymentMethodText = computed(() => {
  const methods = {
    cash: '现金支付',
    wechat: '微信支付',
    alipay: '支付宝',
    card: '银行卡'
  }
  return methods[selectedPaymentMethod.value] || ''
})

// 方法
const addProduct = () => {
  if (!scanCode.value.trim()) return
  
  const product = products.value.find(p => p.code === scanCode.value)
  if (!product) {
    alert('商品不存在！')
    scanCode.value = ''
    return
  }

  const existingItem = cartItems.value.find(item => item.code === product.code)
  if (existingItem) {
    existingItem.quantity++
  } else {
    cartItems.value.push({
      code: product.code,
      name: product.name,
      price: product.price,
      quantity: 1
    })
  }
  
  scanCode.value = ''
}

const increaseQuantity = (index) => {
  cartItems.value[index].quantity++
}

const decreaseQuantity = (index) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity--
  }
}

const removeItem = (index) => {
  cartItems.value.splice(index, 1)
}

const clearCart = () => {
  cartItems.value = []
  currentMember.value = null
}

const searchMember = () => {
  if (!memberCode.value.trim()) return
  
  // 模拟会员查询
  const members = [
    { code: 'M001', name: '张三', points: 1250, level: 'VIP' },
    { code: 'M002', name: '李四', points: 580, level: '普通' },
    { code: 'M003', name: '王五', points: 2300, level: 'VIP' }
  ]
  
  const member = members.find(m => m.code === memberCode.value || m.name.includes(memberCode.value))
  if (member) {
    currentMember.value = member
  } else {
    alert('会员不存在！')
    currentMember.value = null
  }
}

const processPayment = (method) => {
  if (cartItems.value.length === 0) {
    alert('购物车为空！')
    return
  }
  
  selectedPaymentMethod.value = method
  showPaymentModal.value = true
}

const confirmPayment = () => {
  // 模拟支付处理
  alert(`支付成功！\n支付方式：${paymentMethodText.value}\n支付金额：¥${grandTotal.value.toFixed(2)}`)
  
  // 清空购物车和会员信息
  clearCart()
  showPaymentModal.value = false
}

const cancelPayment = () => {
  showPaymentModal.value = false
}
</script>

<style scoped>
.pos-page {
  height: 100vh;
  background: #f5f7fa;
  padding: 20px;
}

.pos-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  height: calc(100vh - 40px);
}

/* 左侧面板 */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scan-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.scan-input {
  display: flex;
  gap: 10px;
}

.scan-field {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.scan-field:focus {
  border-color: #409eff;
}

.scan-btn {
  padding: 12px 24px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.scan-btn:hover {
  background: #337ecc;
}

.cart-section {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cart-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.clear-btn {
  padding: 8px 16px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 4px;
}

.item-price {
  font-size: 14px;
  color: #606266;
}

.item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-display {
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.remove-btn {
  padding: 6px 12px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* 右侧面板 */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.total-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 16px;
}

.discount-row {
  color: #67c23a;
}

.grand-total {
  font-size: 20px;
  font-weight: 700;
  color: #409eff;
  border-top: 2px solid #f0f0f0;
  padding-top: 12px;
  margin-top: 12px;
}

.payment-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.payment-btn {
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-btn.cash {
  background: #67c23a;
  color: white;
}

.payment-btn.wechat {
  background: #07c160;
  color: white;
}

.payment-btn.alipay {
  background: #1677ff;
  color: white;
}

.payment-btn.card {
  background: #e6a23c;
  color: white;
}

.payment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.member-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.member-input {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.member-field {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.member-btn {
  padding: 12px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.member-info {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.member-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.member-points, .member-level {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

/* 支付弹窗 */
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  min-width: 400px;
}

.modal-content h3 {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #303133;
}

.payment-amount {
  font-size: 36px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 16px;
}

.payment-method {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
}

.modal-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.confirm-btn, .cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.confirm-btn {
  background: #409eff;
  color: white;
}

.cancel-btn {
  background: #f56c6c;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .pos-container {
    grid-template-columns: 1fr;
  }
  
  .right-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .pos-page {
    padding: 10px;
  }
  
  .payment-methods {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    min-width: 300px;
    margin: 20px;
  }
}
</style> 